<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nginx多域名代理配置</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      body {
        background-color: #1a1a2e;
        color: #e6e6e6;
        line-height: 1.6;
        padding: 20px;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
      header {
        text-align: center;
        margin-bottom: 40px;
        padding: 20px;
        background: #16213e;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      h1 {
        color: #4cc9f0;
        margin-bottom: 10px;
      }
      .subtitle {
        color: #a5b4cb;
        font-size: 1.2em;
      }
      .content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }
      @media (max-width: 768px) {
        .content {
          grid-template-columns: 1fr;
        }
      }
      .card {
        background: #16213e;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .card h2 {
        color: #4cc9f0;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #4cc9f0;
      }
      pre {
        background: #0f3460;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
        color: #fff;
        margin: 15px 0;
        font-family: "Consolas", monospace;
      }
      code {
        color: #f72585;
        font-family: "Consolas", monospace;
      }
      .explanation {
        margin-top: 20px;
      }
      .explanation h3 {
        color: #4cc9f0;
        margin-bottom: 10px;
      }
      .explanation p {
        margin-bottom: 10px;
      }
      .domain-example {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
        flex-wrap: wrap;
      }
      .domain {
        text-align: center;
        padding: 15px;
        background: #0f3460;
        border-radius: 8px;
        margin: 10px;
        min-width: 200px;
      }
      .domain h4 {
        color: #4cc9f0;
        margin-bottom: 5px;
      }
      .footer {
        text-align: center;
        margin-top: 40px;
        padding: 20px;
        color: #a5b4cb;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Nginx多域名代理配置</h1>
        <p class="subtitle">根据访问域名不同映射到不同的网站资源目录</p>
      </header>

      <div class="content">
        <div class="card">
          <h2>Nginx配置示例</h2>
          <pre><code># 配置HTTP到HTTPS的重定向
server {
    listen 80;
    server_name example.com www.example.com test-site.com;
    return 301 https://$server_name$request_uri;
}

# 配置example.com域名
server {
    listen 443 ssl;
    server_name example.com www.example.com;
    
    ssl_certificate /path/to/example.com.crt;
    ssl_certificate_key /path/to/example.com.key;
    
    root /var/www/example.com;
    index index.html index.php;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # 其他配置...
}

# 配置test-site.com域名
server {
    listen 443 ssl;
    server_name test-site.com;
    
    ssl_certificate /path/to/test-site.com.crt;
    ssl_certificate_key /path/to/test-site.com.key;
    
    root /var/www/test-site.com;
    index index.html index.php;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    # 其他配置...
}

# 默认服务器块，处理未匹配的域名
server {
    listen 80 default_server;
    listen 443 ssl default_server;
    
    ssl_certificate /path/to/default.crt;
    ssl_certificate_key /path/to/default.key;
    
    return 444; # 丢弃连接
}</code></pre>
        </div>

        <div class="card">
          <h2>配置说明</h2>
          <div class="explanation">
            <h3>工作原理</h3>
            <p>
              Nginx通过<code>server_name</code>指令识别访问的域名，然后将请求路由到对应的服务器块进行处理。
            </p>

            <h3>关键配置项</h3>
            <p><strong>server_name</strong>: 指定该服务器块响应的域名</p>
            <p><strong>root</strong>: 设置网站资源的根目录</p>
            <p><strong>listen</strong>: 指定监听的端口和协议</p>
            <p><strong>ssl_certificate</strong>: SSL证书路径(HTTPS配置)</p>
            <p><strong>ssl_certificate_key</strong>: SSL证书密钥路径</p>

            <h3>示例场景</h3>
            <div class="domain-example">
              <div class="domain">
                <h4>example.com</h4>
                <p>映射到: /var/www/example.com</p>
              </div>
              <div class="domain">
                <h4>test-site.com</h4>
                <p>映射到: /var/www/test-site.com</p>
              </div>
            </div>

            <h3>注意事项</h3>
            <p>1. 确保DNS已将域名解析到服务器IP</p>
            <p>2. 配置SSL证书以实现HTTPS访问</p>
            <p>3. 设置适当的文件权限</p>
            <p>4. 配置默认服务器块以提高安全性</p>
          </div>
        </div>
      </div>

      <div class="footer">
        <p>Nginx多域名代理配置示例 | 基于域名的虚拟主机</p>
      </div>
    </div>
  </body>
</html>
